<template>
	<view class="tui-container">
		
		<view class="f-domain">
			<!-- 选项卡 -->
			<view class="tab" >
				<v-tabs   v-model="activeTab" :scroll="true" height="94rpx"
								:tabs="tabs"  @change="changeTab"	activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px"/>
			</view>
		</view>
		
		<!-- 创建圈子按钮 -->
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create" v-if="!phone">创建</button>
		<button type="primary" @click="create" hover-class="none" class="create" v-else>创建</button>
		<!--圈子列表-->
		<scroll-view scroll-y="true" >
			<view class="tui-news-view" v-if="cirList.length > 0">
				<view class="circle-item tui-news-flex" v-for="(item,index) in cirList" :key="index"  @click="godetail(item.id)">
					<view class="tui-news-picbox  tui-flex-between ">
						<image :src="item.logo" mode="aspectFill" class="tui-block"></image>  
					</view>
					<view class="tui-news-tbox tui-flex-column " >
						<view class="name">{{item.name}}</view>
						<!-- <view class="intro">{{item.intro}}</view> -->
						<view class="detail">
							<view class="u-num">{{item.user_num}}人参加</view>
							<view class="vLine"></view>
							<view class="posted">{{item.posted}}次打卡</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/images/user/godetail.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="none" v-if="cirList.length === 0">
				还没有圈子喔，赶快创建属于你的圈子吧~_~
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	import {mapState} from 'vuex'
	export default {
		
		data() {
			return {
				page:1,			 //圈子列表页数	
				limit:100,	 //圈子单页数据条数
				activeTab: 0,
				tabs:[],		 //分类列表
				id:null, 		 //圈子类别id
				cateList:[] ,//分类列表
				cirList:[]   //分类的圈子列表
			}
		},
		
		computed:mapState(['phone']), 
		
		mounted(options) {
			 this.getCategories()
		},
		
		methods: {
			
			changeTab(e) {//切换选项
				this.activeTab = e
				this.getCategoryList(this.page,this.limit, this.tabs[this.activeTab].id)
			},
			
			async getCategories() {//获取圈子分类
				this.cateList = await api.GetCategories()
				this.tabs = this.cateList.map(item => {return {id: item.id, name: item.name}})
				this.getCategoryList(this.page,this.limit, this.tabs[this.activeTab].id)  //需要确保得到上个请求数据id，再去发送该请求
			},
			
			async getCategoryList(page,limit,id) {
				this.cirList = await api.GetCateCirList(page,limit,id)
			},
			
			create() {//跳转到创建圈子页面
				uni.navigateTo({
					url:'/pages/circle/comps/createCircle?activeTab=' + this.activeTab
				})
			},
			
			godetail() {//跳转到圈子页面
				uni.navigateTo({
					url:'/pages/circle/comps/Detail?id='+arguments[0]
				})
				console.log(arguments[0]);
			},
			
			async getPhoneNumber (e) {//手机号授权
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							this.create()
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户拒绝了手机号授权') ;   
			    }
			},
		},
		
		//页面相关事件处理函数--监听用户下拉动作
		/* onPullDownRefresh: function() {
			this.newsList = this.dataSources;
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false;
			uni.stopPullDownRefresh();
			let options = {
				msg: "刷新成功，为你更新了10条数据",
				duration: 2000,
				type: "translucent"
			};
			setTimeout(() => {
				this.$refs.toast.showTips(options);
			}, 300);
		}, */

		// 页面上拉触底事件的处理函数
		/* onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 3) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				let arr = JSON.parse(JSON.stringify(this.dataSources));
				if (this.pageIndex >= 1) {
					for (let item of arr) {
						item.isTop = false;
					}
				}
				this.newsList = this.newsList.concat(arr);
				this.pageIndex = this.pageIndex + 1;
				this.loadding = false		
			}
		} */
	}
</script>

<style lang="scss" scoped>
.tab {
	// border-bottom: 8rpx solid #f6f6f6;
	position: fixed;
	width: 100%;
	font-size: 34rpx;
	background:#fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.tui-news-view {
	.circle-item {
		padding:  25rpx;
		border-bottom: 1rpx solid #F3F6F5;
		.right {
			display: flex;
			align-items: center;
			height: 168rpx;
			// width: 140rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #999;
			right: 0;
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
}
.none {
	height: 100vh;
	padding: 0 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.tui-container {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-searchbox {
	padding: 16rpx 20rpx;
	box-sizing: border-box;
	background-color: #F2F2F2;
}

.tui-rolling-search {
	width: 100%;
	height: 60rpx;
	border-radius: 35rpx;
	padding: 0 40rpx 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	color: #999;
}

.tui-swiper {
	font-size: 26rpx;
	height: 60rpx;
	flex: 1;
	padding-left: 12rpx;
}

.tui-swiper-item {
	display: flex;
	align-items: center;
}

.tui-hot-item {
	line-height: 26rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tui-banner-swiper {
	width: 100%;
	height: 300rpx;
	position: relative;
}

.tui-slide-image {
	width: 100%;
	height: 300rpx;
	display: block;
}

.tui-banner-title {
	width: 100%;
	height: 100rpx;
	position: absolute;
	z-index: 9999;
	color: #fff;
	bottom: 0;
	padding: 0 30rpx;
	padding-top: 25rpx;
	font-size: 34rpx;
	font-weight: bold;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* #ifdef MP-WEIXIN  */
.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

.tui-banner-swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.tui-banner-swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

.tui-banner-swiper .wx-swiper-dot-active::before {
	background: #5677fc;
}

.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>>.tui-banner-swiper .uni-swiper-dots.uni-swiper-dots-horizontal {
	width: 100%;
	top: 280rpx;
	text-align: right;
	padding-right: 30rpx;
	box-sizing: border-box;
}

>>>.tui-banner-swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>>.tui-banner-swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 8rpx;
}

>>>.tui-banner-swiper .uni-swiper-dot-active::before {
	background: #5677fc;
}

>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 18rpx;
}

/* #endif */

.tui-news-flex {
	width: 100%;
	display: flex;
	box-sizing: border-box;
}

.tui-flex-start {
	align-items: flex-start !important;
}
	
.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column !important;
}

.tui-flex-between {
	justify-content: space-between !important;
}

.tui-news-cell {
	display: flex;
	
}

.tui-news-tbox {
	padding: 0 20rpx;
	flex: 1;
	display: flex;
	justify-content: space-evenly;
	font-size: 28rpx;
	.name {
		font-size: 34rpx;
		color: #323232;
	}
	.intro {
		display: -webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
		overflow: hidden;
	}
	.detail  {
		display: flex;
		font-size: 28rpx;
		color: #8C8C8C;
		.vLine {
			border-left: solid 1px #8C8C8C;
			height: 13px;
			margin: auto 15rpx;
			vertical-align: middle;
			display: inline-block;
		}
		.posted {
			margin-left: 10rpx;
		}
	}
	
}

.tui-news-picbox {
	display: flex;
	position: relative;
	width: 220rpx;
	height: 150rpx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}

.tui-w220 {
	width: 220rpx;
}

.tui-h165 {
	height: 165rpx;
}

.tui-block {
	display: block;
}

.tui-w-full {
	width: 100%;
}

.tui-one-third {
	width: 33%;
}

.tui-news-title {
	width: 100%;
	font-size: 34rpx;
	word-break: break-all;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	box-sizing: border-box;
}

.tui-pl-20 {
	padding-left: 20rpx;
}

.tui-pt20 {
	padding-top: 20rpx;
}

.tui-sub-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #999;
	box-sizing: border-box;
	line-height: 24rpx;
}

.tui-sub-source {
	font-size: 26rpx;
}

.tui-sub-cmt {
	font-size: 24rpx;
	line-height: 24rpx;
	display: flex;
	align-items: center;
}


.tui-scale {
	transform: scale(0.6);
	transform-origin: center center;
}

.tui-btm-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 24rpx;
	color: #fff;
	padding: 2rpx 12rpx;
	background: rgba(0, 0, 0, 0.6);
	z-index: 20;
	transform: scale(0.8);
	transform-origin: 100% 100%;
}

.tui-video {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
}

.tui-icon {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	padding: 26rpx;
}
.f-domain {
	top: 0;
	height: 98rpx;
	z-index: 99;
	background-color: #ffffff;
}
.create {
	position: fixed;
	right: 36rpx;
	bottom: 280rpx;
	width: 135rpx;
	height: 60rpx;
	z-index: 1;
	background-color: #0068ff;
	color: #fff;
	font-size: 28rpx; 
	align-items: center;
	display: flex;
	justify-content: center;

}
</style>
